<template>
	<view class="task page-main">
		<view class="title">
			<router-link :underline="false" :to="{ path: '/pages/home/index' }"><i class="fl goback el-icon-arrow-left" @click="goBack"></i></router-link>
			<view class="name">Tasks</view>
		</view>
		
		<view class="taskList">
			<!-- <dl v-for="(item,index) in msgList" @click="handleInfo(item)">
				<dt><img src="@/static/images/messageIcon.png" alt="" srcset=""></dt>
				<dd>
					<view class="topInfor">
						<strong class="fl f16">{{item.title}}</strong>
					</view>
					<span class="f12">{{item.content}}</span>
				</dd>
				<dd>
					<em>{{item.createTime}}</em>
				</dd>
			</dl> -->
			<view class="tables">
				<view class="head">
					<view class="item name">Task</view>
					<view class="item">Amount of Rewards</view>
					<view class="item action">Action</view>
				</view>
				<view class="body">
					<scroll-view class="list" scroll-y="true" @scrolltolower="loadMore">
						<view v-for="(item, index) in taskList" :key="index" class="conetnt">
							<view class="item name">{{item.taskName}}</view>
							<view class="item">{{item.rewardAmount}} CHAT</view>
							<view class="item action claimreward" style="color: #6D50DF;" v-if="item.authStatus === 2"><span @click="claimReward(item)">Claim Reward</span></view>
							<view class="item action" style="color: #007AFF;" v-if="item.authStatus === 3">Under Review</view>
							<view class="item action" style="color: #34C759;" v-if="item.authStatus === 4">Rewarded</view>
							<view class="item action" style="color: #FF3B30;" v-if="item.authStatus === 5"><span @click="claimReward(item)">Review Failed</span></view>
						</view> 
						<view v-if="loading" class="loading">loading...</view>
						<view v-if="!loading && !hasMoreData" class="nodata">Not Data</view>
					</scroll-view>
				</view>
			</view>
		</view>
		
		<div class="bottom-bg"></div>
	</view>
</template>

<script>
import authMixin from '@/mixins/auth'
import { getToken } from '@/utils/auth.js'
import generateID from '@/utils/generateID.js'
	
export default {
  mixins: [authMixin],
  data() {
	return {
	  dataList: [],
	  currentPage: 1,
	  pageSize: 10,
	  loading: false,
	  hasMoreData: true,
	  taskList: [{
		  taskName: 'aaaa',
		  rewardAmount: '22',
		  authStatus: 2
	  }]
	};
  },
  created() {
	this.loadData();
  },
  methods: {
	async loadData() {
	  this.loading = true;
	  let params = {
		  token: getToken()
	  }
	  const {code, data} = await this.$api.task.getCustomerTaskList(params)
	  if(code === 200) {
		  this.taskList = data
		  this.loading = false
	  }
	},
	loadMore() {
	  if (!this.loading && this.hasMoreData) {
		this.loadData()
	  }else {
		uni.showToast({
			title: 'No More Data',
			icon: 'none'
		})
	  }
	},
	claimReward(obj) {
		uni.reLaunch({
			url: `/pages/task/file?taskId=${obj.taskId}&taskName=${obj.taskName}`
		})
	},
	async showTrade() {
		let params = {}
		const {code, data} = await this.$api.common.getMenuSwitch(params)
		if(code === 200) {
			if(data.trade === 'close') {
				uni.setTabBarItem({
					index: 2,
					visible: false
				})
			}else {
				uni.setTabBarItem({
					index: 2,
					visible: true
				})
			}
		}
	}
  },
  mounted() {
	this.showTrade()
  }
};
</script>

<style lang="scss" scoped>
.task {
	padding:0;
	position: relative;
	height: 100%;
	background:#0A0619 url('@/static/images/task/task-bg-top.png') no-repeat;
	background-size:100%;
	z-index: 1;
	.bottom-bg {
		position: absolute;
		bottom: 0;
		z-index: 2;
		width: 750rpx;
		height: 556rpx;
		background: url('@/static/images/task/task-bg-bottom.png') no-repeat;
		background-size: 100%;
	}
	.title{
		position: relative;
		width: 100%;
		padding: 20rpx 30rpx;
		// display: flex;
		// justify-content: space-between;
		box-sizing: border-box;
		.goback{
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			font-size: 48rpx;
			color: #fff;
		}
		.name{
			margin-top: 48rpx;
			font: 500 80rpx/80rpx DingTalk-JinBuTi;
			color: #fff;
			padding: 80rpx 0;
			display: block;
		}
	}
	.taskList {
		height: calc(100% - 500rpx);
		padding: 30rpx;
		margin: 0 40rpx;
		border: 1px solid #ffffff66;
		border-radius: 20rpx;
		background-color: #2E3257;
		.tables {
			position: relative;
			height: calc(100% - 145rpx);
			border-radius: 40rpx 40rpx 0 0;
			.head {
				display: flex;
				// padding: 0 20rpx;
				height: 100rpx;
				border-radius: 40rpx 40rpx 0 0;
				.item {
					width: 37%;
					text-align: center;
					font: 500 28rpx/36rpx 'Microsoft Yahei';
					color: #ffffff73;
					line-height: 1.2;
					&.action {
						width: 26%;
					}
				}
			}
			.body {
				.list {
					//claimreward underreview rewarded reviewfailed
					.conetnt {
						display: flex;
						.item {
							width: calc(37% - 20rpx);
							min-height: 42rpx;
							padding: 30rpx 20rpx;
							font: 500 28rpx/42rpx Arial,'Microsoft Yahei';
							text-align: center;
							color: #fff;
							box-shadow: inset 0 -1px 0 0 #ffffff14;
							&.name {
								width: calc(45% - 30rpx) !important;
								padding-left: 15rpx;
								padding-right: 15rpx;
								text-align: left;
								// overflow: hidden;
								word-break: break-all;
							}
							&.action {
								width: 26%;
								font: 500 26rpx/30rpx 'PingFangSC';
							}
							&.claimreward {
								span {
									display: inline-block;
									padding: 5rpx 10rpx;
									font: 500 26rpx/30rpx 'PingFangSC';
									color: #fff;
									border-radius: 10rpx;
									background-color: #6D50DF;
								}
							}
						}
					}
					.loading, .nodata {
						font: 500 28rpx/80rpx 'Microsoft Yahei';
						text-align: center;
						color: #fff;
					}
				}
			}
		}
	}
}
</style>